<template>
	<view>
		<!-- 搜索框 -->
		<view class="search-bar">
			<uni-search-bar radius="100" placeholder="请输入搜索内容" clearButton="none" cancelButton="none"
				@confirm="search" />
		</view>
		<view class="backlog_title">
			<view @click="clicktrue(1)">
				<image src="http://106.14.56.171:15016/images/messageicon/backlog.png" mode="widthFix"
					v-if="!userShow" />
				<image src="http://106.14.56.171:15016/images/messageicon/u3035.png" mode="widthFix" v-if="userShow" />
				<text class="Agent">待办</text>
			</view>
			<view @click="clicktrue(2)">
				<image src="http://106.14.56.171:15016/images/messageicon/accomplish.png" mode="widthFix"
					v-if="accomFlag"></image>
				<image src="/static/accomplishRed.png" mode="widthFix" v-if="!accomFlag"></image>
				<text class="Agent">已办</text>
			</view>
		</view>

		<!-- 待办点击隐藏显示 -->
		<view v-show="show1">
			<view class="backlog_detail" v-for="(item,index) in list" :key="item.id">
				<!-- v-if="item.status== 0" -->
				<view v-if="item.status== 0">
					<view class="backlog_top">

						<view class="left_img">
							<fileImage :src="item.coverPicUrl" :className="['theme-image']" />
						</view>

						<view class="right_content">
							<!-- 检备修项目 -->
							<view class="right_top" v-if="item.isEpoxy==false">
								<view class="right_left">
									<text>{{item.prjName}}</text>
									<text>{{item.prjCode}}</text>
								</view>
								<view class="right_img">
									<image src="http://106.14.56.171:15016/images/messageicon/u3039.png" mode="widthFix"
										v-if="item.interactivityType==1">
									</image>
									<image src="http://106.14.56.171:15016/images/messageicon/u3041.png" mode="widthFix"
										v-if="item.interactivityType==2">
									</image>
								</view>
							</view>
							<!-- 环氧 -->
							<view class="right_top" v-if="item.isEpoxy==true">
								<view class="right_left">
									<text>{{ item.epPrjName|| '' }}</text>
									<text>{{item.buyerBillno}}</text>
									<text style="color: #000000; font-size: 28rpx;">{{item.planCode}}</text>
								</view>
								<view class="right_img">
									<image src="http://106.14.56.171:15016/images/messageicon/u3039.png" mode="widthFix"
										v-if="item.interactivityType==1">
									</image>
									<image src="http://106.14.56.171:15016/images/messageicon/u3041.png" mode="widthFix"
										v-if="item.interactivityType==2">
									</image>
								</view>
							</view>
							<view class="right_bottom">
								<text>{{item.serviceSeller}}</text>
								<text>提交时间:{{item.createTime?item.createTime.slice(0,10):item.createTime}}</text>
							</view>
						</view>
					</view>
					<view class="backlog_buttons">
						<button class="mssage_butn" @click="clickAtlas(item)">项目图集</button>
						<button class="mssage_butn" @click="clickParticulars(item)">项目详情</button>
						<button style="color:#9E001A;" class="messag_button" @click="goToDatail(item)">
							{{item.interactivityType == 1?"去签收":"方案"}}
						</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 已办点击隐藏显示 -->
		<view class="none" v-show="show2">
			<view class="backlog_detail" v-for="(item,index) in num" :key="item.id">
				<view v-if="item.status != 0">
					<view class="backlog_top">
						<view class="left_img">
							<fileImage :src="item.coverPicUrl" :className="['theme-image']" />
						</view>

						<view class="right_content">
							<view class="right_top">
								<!-- 检备修的项目 -->
								<view class="right_left" v-if="item.isEpoxy==false">
									<text>{{item.prjName}}</text>
									<!-- <text>{{item.buyerBillno}}</text> -->
								</view>
								<!-- 环氧签收的项目 -->
								<view class="right_left" v-if="item.isEpoxy==true">
									<text>{{ item.epPrjName|| '' }}</text>
									<text>{{item.planCode}}</text>
									<text>{{item.prjName}}</text>
								</view>


								<view class="right_img">
									<image src="http://106.14.56.171:15016/images/messageicon/u3039.png" mode="widthFix"
										v-if="item.interactivityType==1">
									</image>
									<image src="http://106.14.56.171:15016/images/messageicon/u3041.png" mode="widthFix"
										v-if="item.interactivityType==2">
									</image>
								</view>
							</view>
							<view class="right_bottom">
								<text v-if="item.isEpoxy==false">{{item.prjCode}}</text>
								<text>{{item.serviceSeller}}</text>
								<text><text
										class="textTitle">提交时间:</text>{{item.createTime?item.createTime.slice(0,10):item.createTime}}</text>
							</view>
						</view>
					</view>
					<view class="backlog_buttons">
						<button class="mssage_butn" @click="clickAtlas(item)">项目图集</button>
						<button class="mssage_butn" @click="clickParticulars(item)">项目详情</button>
					</view>
				</view>
			</view>
		</view>
		<!-- 显示空白 -->
		<view class="backlog_detail blankTo" v-show="show1">
			<view class="">
				<image src="http://106.14.56.171:15016/images/blank/blank.png" mode="" />
				<text>暂无待办…</text>
			</view>
		</view>
		<view class="backlog_detail blankTo" v-if="doneLength==0">
			<view class="">
				<image src="http://106.14.56.171:15016/images/blank/blank.png" mode="" />
				<text>暂无已办…</text>
			</view>
		</view>

	</view>

	</view>
</template>

<script>
	import fileImage from '@/components/fileImage/fileImage.vue'
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import {
		debounce,
		showLoading
	} from '@/config/debounce.js'
	export default {
		components: {
			fileImage
		},
		data() {
			return {
				doneLength: '',
				show1: true,
				show2: false,
				userShow: true,
				accomFlag: true,
				url: "https://uni.epumping.com/doc/20220621/685cac98-6021-457a-b783-09c576028891.pdf",
				aa: {
					searchValue: "",
					pageNo: 1,
					pageSize: 10,
					sortField: "",
					sortOrder: "",
					descStr: "",
					companyName: ""
				},
				list: [],
				detailCode: {},
				limitLoad: false, // 防止重复加载
				infinite: false, // 是否还有数据
				num: []
			};
		},
		onShow() {
			this.getAgendaList()
			this.init()
		},
		onLoad(option) {
			// console.log(option, 11111111111111);
			if (option.code && option.code == 'ifromButton') {
				this.affirmAgenda(option)
			}
		},
		computed: {
			...mapState(['userInfo'])
		},
		// 下拉刷新
		onPullDownRefresh() {
			this.init()
			this.getAgendaList()
		},
		// 触底加载
		onReachBottom() {
			if (this.infinite) this.getAgendaList()
		},
		methods: {
			//获取待办//已办数据
			getAgendaList: debounce(function() {
				if (this.limitLoad) return
				this.limitLoad = true
				showLoading({
					mask: true
				})
				this.aa.companyName = this.userInfo.corpName
				this.$http.post('api/Agenda/GetAgendaList', this.aa).then(res => {
					// console.log(res.items.length, '空白显示');
					this.doneLength = res.items.length
					this.limitLoad = false
					uni.hideLoading()
					// 赋值数据
					if (this.aa.pageNo == 1) {
						this.list = res.items
						this.num = res.items
					} else {
						this.list = this.list.concat(res.items)
						this.num = this.num.concat(res.items)
					}
					// 还有数据分页加一
					if (res.hasNextPages) this.aa.pageNo++
					// 显示是否下拉加载数据文案
					this.infinite = res.hasNextPages
				}).catch(err => {
					uni.hideLoading()
					this.limitLoad = false
				})
			}, 300),
			affirmAgenda(code) {
				const {
					name,
					id
				} = this.userInfo
				let data = {
					type: code.type,
					prjInfoId: code.prjInfoId,
					confirmBy: id,
					confirm_CN: name
				}
				this.$http.post('api/Agenda/AffirmAgenda', data).then(res => {
					if (data.type == 1) {
						uni.showToast({
							title: '确认成功',
							icon: 'none',
						})
					}
					this.getAgendaList()
				})
			},
			clicktrue(index) {
				if (index == 1) {
					this.show1 = true;
					this.show2 = false;
					this.userShow = true
					this.accomFlag = true
				} else {
					this.userShow = false
					this.show1 = false;
					this.show2 = true;
					this.accomFlag = false
				}
			},
			//搜索的事件
			search(e) {
				this.init()
				this.aa.searchValue = e.value
				this.getAgendaList()
			},
			//去打开签字附件
			goToDatail(item) {
				uni.navigateTo({
					url: './backlog_webView?url=' + item.filePath + '&id=' + item.prjInfoId + '&code=' + item
						.interactivityType + '&isEpoxy=' + item.isEpoxy + '&epPrjId=' + item.epPrjId + '&planId=' +
						item.planId
				});

			},
			//

			//tiao转项目图集
			clickAtlas(item) {
				if (item.isEpoxy) {
					uni.navigateTo({
						url: `/pages/project/project_img/project_album?id=${item.planId}&code=1&name=${item.epPrjName}-图库`,
					});
				}
				uni.navigateTo({
					url: '../../project/project_img/project_album?id=' + item.prjInfoId,
				});
			},
			//跳转项目详情
			clickParticulars(item) {
				if (item.isEpoxy) {
					uni.navigateTo({
						url: '/pages/epoxyfile/epoxydateil?epPrjId=' + item.epPrjId + '&planId= ' + item.planId


					});
				} else {
					uni.navigateTo({
						url: '../../project/project_detail/project_detail?id=' + item.prjInfoId
					});
				}

			},
			// 初始化数据
			init() {
				this.aa.pageNo = 1
				this.list = []
				this.num = []
				this.limitLoad = false
			}

		}
	};
</script>

<style lang="less" scoped>
	.textTitle {
		color: #adadad;
	}

	.paigong {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		// background-color: red
		;
	}

	.search-bar {
		background-color: #ffffff;
		/* display: flex;
		align-items: center; */
		/* 垂直居中 */
		/* 	height: 110rpx; */
	}

	.backlog_title {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 80rpx;
		background-color: #fff;

		view {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 50%;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 3%;
			}
		}
	}

	.backlog_detail {
		background-color: #fff;
		width: 96%;
		margin-left: 2%;
		margin-top: 15rpx;
		border-radius: 30rpx;
	}

	.blankTo {
		height: 80vh;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: space-around;


		>view {
			display: flex;
			align-items: center;
			flex-direction: column;
			font-size: 26rpx;

			>image {
				width: 300rpx;
				height: 300rpx;
			}

			>text {
				margin-top: 40rpx;
			}

		}


	}

	.none {
		background-color: #f5f5f5;
	}

	// .backlog_detail>view:nth-child(1){
	// 	border-radius: 10px 0 10px 0;
	// 	background-color: aqua;
	// }

	.backlog_top {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-around;
		font-size: 30rpx;
		// background-color:red;

		.left_img {
			margin-left: 3%;
			margin-top: 56rpx;
			width: 17%;
			height: 100%;

			image {
				width: 100%;
				height: 130rpx;
			}
		}

		.right_content {
			display: flex;
			flex-direction: column;
			width: 76%;
			margin-left: 4%;

			.right_top {
				width: 100%;
				display: flex;

				.right_left {
					margin-top: 60rpx;
					width: 80%;

					text {
						margin-bottom: 10rpx;
						font-weight: 600;
						overflow: hidden; //超出部分隐藏
						-webkit-line-clamp: 1; //显示几行
						text-overflow: ellipsis; //超出部分显示省略号
						display: -webkit-box; //将对象作为弹性伸缩盒子模型显示
						-webkit-box-orient: vertical; //设置或检索伸缩盒对象的子元素的排列方式 纵向
					}
				}

				.right_img {
					margin-left: 3%;
					width: 17%;
					display: flex;

					justify-items: flex-end;

					image {
						width: 100%;
					}
				}
			}

			.right_bottom {
				display: flex;
				flex-direction: column;
				// align-items: flex-end;
				margin-right: 3%;
				// background-color: aqua;

				text {
					margin-bottom: 10rpx;
				}
			}
		}
	}

	// 注意点击button会在小程序里面不支持
	.backlog_buttons {
		display: flex;
		flex-direction: row;
		margin-top: 20rpx;
		width: 100%;
		padding-bottom: 40rpx;
		justify-content: flex-end;

		uni-button:after {
			border-radius: 82rpx;
		}

		// 项目图集，项目详情 按钮
		.mssage_butn {
			border: 1px solid #b5b5b5;
			border-radius: 82rpx;
		}

		.messag_button {
			border: 1px solid #9e001a;
			border-radius: 82rpx;
		}

		button {
			padding-left: 0rpx;
			padding-right: 0rpx;
			margin: 0rpx;
			margin-right: 3%;
			font-size: 26rpx;
			background-color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			width: 20%;
		}
	}

	.Agent:active {
		color: #b5001e;
	}

	/deep/ .uni-searchbar__box {
		border: 1px solid #EFEFEF;
	}
</style>
<style lang="scss">
	.theme-image {
		width: 100%;
		height: 130rpx;
	}
</style>
